document.addEventListener('DOMContentLoaded', () => {
    const pluginsGrid = document.getElementById('plugins-grid');
    const searchInput = document.getElementById('search');
    const categoryButtons = document.querySelectorAll('.category-btn');
    
    let currentCategory = 'all';
    let searchQuery = '';

    // 渲染插件卡片
    function renderPluginCard(plugin) {
        return `
            <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition">
                <div class="flex items-center mb-4">
                    <i class="${getCategoryIcon(plugin.category)} text-2xl text-blue-500"></i>
                    <h3 class="text-xl font-semibold ml-3">${plugin.name}</h3>
                </div>
                <p class="text-gray-600 mb-4">${plugin.description}</p>
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">所需API：</h4>
                    <div class="flex flex-wrap gap-2">
                        ${plugin.apis.map(api => `
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
                                ${api}
                            </span>
                        `).join('')}
                    </div>
                </div>
                <div class="mb-4">
                    <h4 class="text-sm font-semibold text-gray-700 mb-2">目标用户：</h4>
                    <div class="flex flex-wrap gap-2">
                        ${plugin.targetUsers.map(user => `
                            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
                                ${user}
                            </span>
                        `).join('')}
                    </div>
                </div>
                <div class="flex items-center justify-between mt-4">
                    <span class="text-sm text-gray-500">
                        难度：${getComplexityBadge(plugin.complexity)}
                    </span>
                </div>
            </div>
        `;
    }

    // 获取分类图标
    function getCategoryIcon(categoryId) {
        const category = pluginsData.categories.find(c => c.id === categoryId);
        return category ? category.icon : 'fas fa-puzzle-piece';
    }

    // 获取难度标签
    function getComplexityBadge(complexity) {
        const badges = {
            'easy': '<span class="text-green-500">简单</span>',
            'medium': '<span class="text-yellow-500">中等</span>',
            'hard': '<span class="text-red-500">困难</span>'
        };
        return badges[complexity] || badges['medium'];
    }

    // 过滤插件
    function filterPlugins() {
        return pluginsData.plugins.filter(plugin => {
            const matchesCategory = currentCategory === 'all' || plugin.category === currentCategory;
            const matchesSearch = searchQuery === '' || 
                plugin.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                plugin.description.toLowerCase().includes(searchQuery.toLowerCase());
            return matchesCategory && matchesSearch;
        });
    }

    // 更新显示
    function updateDisplay() {
        const filteredPlugins = filterPlugins();
        pluginsGrid.innerHTML = filteredPlugins.map(renderPluginCard).join('');
    }

    // 事件监听器
    searchInput.addEventListener('input', (e) => {
        searchQuery = e.target.value;
        updateDisplay();
    });

    categoryButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 更新按钮样式
            categoryButtons.forEach(btn => {
                btn.classList.remove('bg-blue-500', 'text-white');
                btn.classList.add('bg-gray-200');
            });
            button.classList.remove('bg-gray-200');
            button.classList.add('bg-blue-500', 'text-white');

            // 更新当前分类
            currentCategory = button.textContent === '全部' ? 'all' : 
                pluginsData.categories.find(c => c.name === button.textContent)?.id || 'all';
            updateDisplay();
        });
    });

    // 初始显示
    updateDisplay();
});
